<template>
  <el-dialog :title="title" :visible.sync="showApplyDialog" :before-close="handleClose" width="35.33rem"
    class="my-dialog__wrapper expert-dialog-wrap">
    <div class="expert-dialog-content">
      <p class="text" v-if="!nextPage">
        <!-- 欢迎词：我们诚挚地欢迎您加入我们平台，成为一名尊贵的推广者。作为我们平台的推广者，您将享有长达一年的推广用户奖金制度。这意味着，每当您通过自己的努力推广，引导用户来到我们的平台，并成功发布任务时，您将获得该任务发布定金的30%作为您的奖励。我们相信，通过您的不懈努力，您将有机会获得一笔可观的奖金。根据我们的预估，这笔奖金的数额将在300到3000美金之间。我们期待您能够充分利用这个机会，与我们一起成长，共同实现更大的成功。 -->
        <img v-if="applyType == 'expert'" src="@/assets/img/zhuanjia.jpg" alt="">
        <img v-else src="@/assets/img/tuiguang.jpg" alt="">
      </p>
      <template v-else>
        <p v-if="applyType == 'expert'" class="price">
          ¥{{ configData.pledgeAmountExpert / 100 }}
        </p>
        <p v-else class="price">¥{{ configData.pledgeAmountSpreader / 100 }}</p>
        <p class="tips">
          {{ $t("申请") }}{{ applyType == "expert" ? $t("专家") : $t("推广者")
          }}{{ $t("需要缴纳保证金") }}
        </p>
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showApplyDialog = false">{{ $t("取 消") }}</el-button>
      <el-button type="primary" v-if="!nextPage" @click="goToApply">{{
        $t("申请")
      }}</el-button>
      <el-button type="primary" v-else @click="goPay" v-loading="isLoading">{{
        $t("去缴纳")
      }}</el-button>
    </span>
    <payDialog ref="payDialog" @payDone="payDone" :payId="payId"></payDialog>
  </el-dialog>
</template>
<script>
import api from "@/api/personcenter";
import api2 from "@/api/reward.js";
export default {
  data() {
    return {
      showApplyDialog: false,
      title: this.$t("申请专家"),
      applyType: "",
      nextPage: false,
      payId: "",
      isLoading: false,
    };
  },
  computed: {
    configData() {
      return this.$store.state.configData;
    },
  },
  methods: {
    async payDone() {
      let res = await this.$http.get(api2.getOrderPayType, {
        params: { id: this.payId, sync: true },
      });
      this.showApplyDialog = false;

      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.$emit('initUserInfo');
      }, 5000);
    },
    goToApply() {
      this.title = this.$t("提示");
      this.nextPage = true;
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    show(type) {
      this.applyType = type;
      this.title =
        type == "expert" ? this.$t("申请专家") : this.$t("申请推广者");
      this.showApplyDialog = true;
      this.nextPage = false;
    },
    async goPay() {
      const url =
        this.applyType == "expert" ? api.applyForExpert : api.applyForSpreader;
      this.isLoading = true;
      let res = await this.$http.put(url);
      this.isLoading = false;
      if (res && res.code == 0) {
        this.payId = res.data;
        this.$refs["payDialog"].openDialog();
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.expert-dialog-content {
  padding: 2.67rem 1.39rem;
  text-align: center;

  .text {
    font-size: 1rem;
    color: #394350;
    text-align: justify;

    img {
      width: 100%;
    }
  }

  .price {
    font-weight: bold;
    font-size: 1rem;
    color: #f85c02;
    line-height: 1.22rem;
    letter-spacing: 2px;
  }

  .tips {
    font-weight: bold;
    font-size: 1rem;
    color: #394350;
  }
}
</style>
